<template>
	<div class="app-container">
		<div class="infoTitle">
			<span @click="$router.back(-1)" style="color: #00afff;margin-right: 15px"><i class="el-icon-back">返回</i></span> <span>图表统计信息</span>
		</div>
		<div style="margin-top: 18px">
			<el-radio-group v-model="radio" @change="radioChange">
				<el-radio-button label="年"></el-radio-button>
				<el-radio-button label="季度"></el-radio-button>
				<el-radio-button label="月"></el-radio-button>
			</el-radio-group>
			<div :style="{height:eheight,width:echartsWidth}"
					 ref="byYear"></div>
		</div>
		<div class="infoTitle">
			数据统计信息
		</div>
		<div style="margin-top: 18px">
			<el-table :data="tabList1" border>
				<el-table-column label="序号" type="index" width="55" align="center" />
				<el-table-column label="年份" align="center" prop="nf"/>
				<el-table-column label="收入（单位：万）" align="center" prop="sr" />
				<el-table-column label="收入环比" align="center" >
					<template slot-scope="scope">
						<span>{{(scope.row.sr - scope.row.lsr)/scope.row.sr * 100| numFilter }}%</span>
					</template>
				</el-table-column>
				<el-table-column label="支出（单位：万）" align="center" prop="zc" />
				<el-table-column label="支出环比" align="center" >
					<template slot-scope="scope">
						<span>{{(scope.row.zc - scope.row.lzc)/scope.row.zc * 100| numFilter }}%</span>
					</template>
				</el-table-column>
				<el-table-column label="利润（单位：万）" align="center" prop="lr" />
				<el-table-column label="利润环比" align="center" >
					<template slot-scope="scope">
						<span>{{(scope.row.lr - scope.row.llr)/scope.row.lr * 100| numFilter }}%</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import { storeIncomeByTime } from "@/api/manage/datacount";
	import echarts from 'echarts'
	export default {
		name: "incomecount",
		components: {},
		filters: {
			numFilter (value) {
				if(value == Infinity || value == -Infinity ||isNaN(value)){
					return 0
				}
				// 截取当前数据到小数点后两位
				return parseFloat(value).toFixed(2)
			}
		},
		// An highlighted block
		watch: {
			$route(){
				this.getList1();
			}
		},
		data() {
			return {
				// 遮罩层
				loading: true,
				activeName:'1',
				echartsWidth: '100%',
				eheight: '400px',
				// 总条数
				total: 0,
				// 便利蜂分店信息表格数据
				tabList1: [],
				radio:'年',
				queryParam:{
					type:1,
					id:null
				},

			};
		},
		created() {
			this.getList1();
		},
		methods: {
			/** 查询便利蜂分店信息列表 */
			getList1() {
				this.queryParam.id = this.$route.query.id
				storeIncomeByTime(this.queryParam).then(response => {
					this.tabList1 = response.data;
					this.drawE1(this.tabList1,'便利蜂分店按年统计收支表');
				});
			},
			drawE1(countData, title) {
				let keyName = []
				let sr = []
				let zc = []
				let lr = []
				countData.forEach(item =>{
					keyName.push(item.nf);
					sr.push(item.sr)
					zc.push(item.zc)
					lr.push(item.lr)
				})
				let myChart = echarts.init(this.$refs.byYear);
				// 绘制图表
				myChart.setOption({
					legend: {
						data: ["收入（万）","支出（万）","利润（万）"],
						top: '0%'
					},
					// color: ['#3398DB'],
					title: {title},
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					xAxis: {
						data: keyName,
						name: '时间'
					},
					yAxis: {},
					series: [{
						name: '收入（万）',
						type: 'bar',
						data: sr
					},{
						name: '支出（万）',
						type: 'bar',
						data: zc
					},{
						name: '利润（万）',
						type: 'bar',
						data: lr
					}]
				})
				window.addEventListener("resize", function () {
					myChart.resize();
				});
			},
			radioChange(val){
				if(val == '年'){
					this.queryParam.type = 1
				}else if(val == '季度'){
					this.queryParam.type = 2
				}else {
					this.queryParam.type = 3
				}
				this.getList1()
			}
		}
	};
</script>
<style scoped>
	.infoTitle {
		height: 36px;
		background-color: #f9f9f9;
		padding-left: 23px;
		line-height: 36px;
		color: #333;
		font-size: 14px;
		margin-bottom: 18px;
	}

</style>
